import * as THREE from '../../build/three.module.js';

/**
 * 问题：
 *  开发的过程中你可能会遇到这样一个问题，通过鼠标拖动使浏览器的窗口变大，因为Threejs渲染器的渲染尺寸范围没有跟着变化，出现局部空白区域
 */

/**
 * 视图矩阵 .matrixWroldInverse 与 投影矩阵 .projectionMatrix
 *    相机对象本质就是视图矩阵域投影矩阵的集合
 *    通过代码配置参数影响相机对象的视图矩阵域投影矩阵设置，然后通过算法得到模型在当前投影和视图矩阵下的顶点信息
 */
const scene = new THREE.Scene();

let k = innerWidth / innerHeight,
      s = 400,
      a = 60;
// 下面两行代码应用相机对象的投影矩阵设置
const oCamera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 10000);
const pCamera = new THREE.PerspectiveCamera(a, k, 1, 10000);
// 下面四行代码分别影响两种相机的视图矩阵（本质上一样的）
oCamera.position.set(200, 300, 200);
oCamera.lookAt(scene.position);
pCamera.position.set(200, 300, 200);
pCamera.lookAt(scene.position);

const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xaaaaaa);
renderer.setSize(innerWidth, innerHeight);

/**
 * 正交相机的自适应渲染
 *    只需监听 window.onresize 事件，在回调中重置 Camera 和 WebGLRender 对象的参数就行了
 */
window.addEventListener('resize', () => {
  // 重置渲染器输出的画布canvas尺寸
  renderer.setSize(innerWidth, innerHeight);
  // 重置相机投影相关参数
  k = innerWidth / innerHeight;
  oCamera.left = -s * k;
  oCamera.right = s * k;
  oCamera.top = s;
  oCamera.bottom = -s;
  // 渲染器指向 render 方法是会读取相机对象的投影矩阵 .projectionMatrix
  // 但不会每渲染一帧，就通过相机的属性计算投影矩阵
  // 如果相机的一些属性发生了变化，需要执行 updateProjectionMatrix() 方法更新相机的投影矩阵
  oCamera.updateProjectionMatrix();
}, false);

/**
 * 透视相机自适应渲染
 *    与正交相机类似
 */
window.addEventListener('resize', () => {
  renderer.setSize(innerWidth, innerHeight);
  pCamera.aspect = innerWidth / innerHeight;
  pCamera.updateProjectionMatrix();
}, false);